<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Scrollable events</title>

	<script type="text/javascript" src="../deviceTheme.js"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/ready",
			"dojo/on",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/Heading",
			"dojox/mobile/RoundRect",
			"dojox/mobile/RoundRectList"
		], function(ready, on, registry){
			ready(function(){
				on(registry.byId("sview"), "beforescroll", function(evt){
					console.log("beforescroll event received: beforeTopHeight=" + evt.beforeTopHeight + ", afterBottomHeight=" + evt.afterBottomHeight);
					if(evt.afterBottomHeight > 40 || evt.beforeTopHeight > 40){
						return false;
					}
				});
				on(registry.byId("sview"), "afterscroll", function(evt){
					console.log("afterscroll event received");
					console.log(evt);
				});
			});
		});
	</script>

</head>
<body style="visibility:hidden;">
	<div id="sview" data-dojo-type="dojox.mobile.ScrollableView">
		<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">Scroll Events</h1>
		<div data-dojo-type="dojox.mobile.RoundRect">
			This is a scrollable view. It sends two different events, "beforescroll" and
			"afterscroll" when it is scrolled. In this demo,
			reception of afterscroll events are logged to the console, and scrolling more
			than 40 pixels before or after the content of the view is disabled by the beforescroll
			handler.
		</div>
		<ul data-dojo-type="dojox.mobile.RoundRectList">
			<li data-dojo-type="dojox.mobile.ListItem">Item 001</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 002</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 003</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 004</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 005</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 006</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 007</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 008</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 009</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 010</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 011</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 012</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 013</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 014</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 015</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 016</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 017</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 018</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 019</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 020</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 021</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 022</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 023</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 024</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 025</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 026</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 027</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 028</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 029</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 030</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 031</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 032</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 033</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 034</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 035</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 036</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 037</li>
			<li data-dojo-type="dojox.mobile.ListItem">Item 038</li>
		</ul>
		<h1 data-dojo-type="dojox.mobile.Heading" fixed="bottom"></h1>
	</div>
</body>
</html>
